<div style="width: 300px;position: relative;">
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>关联量测属性</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <!-- 
        <div mat-dialog-content class="my-form-field" >
        
        <div *ngIf="!addKafka" class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span style="line-height: 28px;display:inline-block;vertical-align: middle;">
                kafka
                <mat-icon style="vertical-align: middle;" (click)="(onAddKafka())" matTooltip="添加kafka">add</mat-icon>
            </span>
            <select (change)="onKafkaChange(kafkaId)"  matNativeControl [(ngModel)]="kafkaId" style="width:100%">
                <option *ngFor="let d of deviceList" [value]="d.id">
                {{d.name}}
                </option>
            </select>
        </div>
        <div *ngIf="!addTag" class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span style="line-height: 28px;display:inline-block;vertical-align: middle;">
                topic&设备id&量测属性
                <mat-icon style="vertical-align: middle;" (click)="(onAddTag())"  matTooltip="添加">add</mat-icon>
            </span>
            
            <select (change)="onTagChange(tagId)"  matNativeControl [(ngModel)]="tagId" style="width:100%">
                <option *ngFor="let t of tagList" [value]="t.id">
                {{t.topic}}-{{t.deviceId}}-{{t.measureCode}}
                </option>
            </select>
        </div>
        
        <div *ngIf="addKafka">
            <mat-icon (click)="(onAddKafka())" matTooltip="选择kafka">folder</mat-icon>
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>kafka别称</span>
                <input  [(ngModel)]="kafkaName" type="text" style="width:300px" >
            </div>
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>kafka地址（ip:端口号）</span>
                <input  [(ngModel)]="host" type="text" style="width:300px" >
            </div>
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>实时数据时间间隔(s)</span>
                <input [(ngModel)]="polling" type="text" style="width:300px" >
            </div>
        </div>
        <hr />
        <div *ngIf="addTag">
            <mat-icon *ngIf="!addKafka && addTag" (click)="(onAddTag())" matTooltip="选择topic&设备id&量测属性">topic&设备id&量测属性</mat-icon>
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>topic</span>
                <input readonly [(ngModel)]="topic" type="text" style="width:300px" >
            </div>
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>设备id</span>
                <input (blur)="getMeasureList(deviceId)" [(ngModel)]="deviceId" type="text" style="width:300px" >
            </div>
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>量测属性</span>
            <select (change)="onMeasureCodeChange(measureCode)" [disabled]="deviceMeasureList.length===0" style="width:100%" matNativeControl [(ngModel)]="measureCode" >
                <option *ngFor="let measure of deviceMeasureList" [value]="measure.code">
                  {{measure.name}}
                </option>
            </select>
        </div>
    -->
    <div mat-dialog-content class="my-form-field" >
        
        <div *ngIf="!addTag" class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span style="line-height: 28px;display:inline-block;vertical-align: middle;">
                设备&量测属性
                <mat-icon style="vertical-align: middle; cursor: pointer;" (click)="(onAddTag())"  matTooltip="添加">add</mat-icon>
            </span>
            <select (change)="onTagChange(tagId)"  matNativeControl [(ngModel)]="tagId" style="width:100%">
                <option *ngFor="let t of tagList" [value]="t.id">
                {{t.name}}
                </option>
            </select>
        </div>
        
        <div *ngIf="addKafka">
            <mat-icon (click)="(onAddKafka())" matTooltip="选择">folder</mat-icon>
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>实时数据时间间隔(s)</span>
                <input [(ngModel)]="polling" type="text" style="width:300px" >
            </div>
        </div>
        <div *ngIf="addTag">
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>设备</span>
                <select (change)="getMeasureList(deviceId)"  matNativeControl [(ngModel)]="deviceId" style="width:100%">
                    <option *ngFor="let t of canvasDeviceList" [value]="t.deviceId">
                        {{t.name}}({{t.deviceId}})
                    </option>
                </select>
            </div>
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>量测属性</span>
            <select (change)="onMeasureCodeChange(measureCode)" [disabled]="deviceMeasureList.length===0" style="width:100%" matNativeControl [(ngModel)]="measureCode" >
                <option *ngFor="let measure of deviceMeasureList" [value]="measure.code">
                  {{measure.name}}
                </option>
            </select>
        </div>
    </div> 
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button (click)="onOkClick()" color="primary" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>
